import './index.less'
import { v4 as uuidv4 } from 'uuid';
import { useDispatch, useSelector, UserModelState } from 'umi';
import { useRef, useState } from 'react'
const Login = () => {
  const [uid,setUuid] = useState(uuidv4())
  const loginList = useSelector((state: { loginList: UserModelState }) => state.loginList);
  const dispatch = useDispatch()
  const userIpt: any = useRef()
  const passwordIpt: any = useRef()
  const imgCodeIpt: any = useRef()

  const ChangeCode = () => {    
    setUuid(uuidv4());
  }
  const sendLoginInfo = () => {
    let t = new Date().getTime()
    dispatch({
      type: 'login/getLoginList',
      payload: { principal: userIpt.current.value, credentials: passwordIpt.current.value, imageCode: imgCodeIpt.current.value, t, sessionUUID: uid }
    })
    setUuid(uuidv4());
  }
  return (
    <div className="login">
      <div className="login-box">
        <div className="top">
          <div className="logo">
            <p>电商运营后台</p>
          </div>
        </div>
        <div className="mid">
          <div className="el-form">
            <div className="el-form-item el-form-item--feedback is-required"><div className="el-form-item__content"><div className="info el-input"><input type="text" autoComplete="off" placeholder="帐号" className="el-input__inner" ref={userIpt} /></div></div></div>
            <div className="el-form-item el-form-item--feedback is-required"><div className="el-form-item__content"><div className="info el-input"><input type="password" autoComplete="off" placeholder="密码" className="el-input__inner" ref={passwordIpt} /></div></div></div>
            <div className="el-form-item el-form-item--feedback is-required"><div className="el-form-item__content"><div className="el-row"><div className="el-col el-col-14"><div className="el-input"><input type="text" autoComplete="off" placeholder="验证码" className="el-input__inner" ref={imgCodeIpt} /></div></div> <div className="login-captcha el-col el-col-10" ><img onClick={ChangeCode.bind(this)} src={`http://localhost:8001/proxyApi/captcha.jpg?uuid=${uid}`} alt="" /></div></div></div></div>
            <div className="el-form-item el-form-item--feedback"><div className="el-form-item__content"><div className="item-btn"><input type="button" value="登录" onClick={sendLoginInfo.bind(this)} /></div></div></div>
          </div>
        </div>
        <div className="bottom">Copyright © 2021 北京八维教育集团</div>
      </div>
    </div>
  )
}
export default Login